<template>
	<view class="home">
		<scroll-view scroll-x="" class="navscroll active" show-scrollbar="false">
			<view class="item" :class="index==navIndex?'active':''" 
			v-for="(item,index) in navArr" :key="item.id"  @click="clickNav(index,item.id)">
				{{item.classname}}
			</view>
			<!-- <view>国内</view> -->
		</scroll-view>
			
		<view class="content">
			<view class="row" v-for="(item,index) in newsList" :key="item.id">
				<Newsbox @tap="goDetail(item)" 
					:item="{title:item.title,author:item.author,hits:item.hits,picurl:item.picurl}">
				</Newsbox>
			</view>
		</view>
		
		<view class="loading">
			<view v-if="loading==1">数据加载中...</view>
			<view v-if="loading==2">没有更多了</view>
		</view>
		
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				navIndex:0,
				navId: 50,
				navArr:[],
				newsList: [],
				pageNum: 1,
				loading: 0 			//0默认 1加载中	2没有更多了
			};
		},
		onLoad() {
			this.getNavData()
			this.getNewsData()
		},
		onPullDownRefresh(){
			console.log('下拉刷新');
			this.pageNum  = 1
			this.navId = 50
			this.newsList = [],
			this.getNavData()
			this.getNewsData()
			uni.stopPullDownRefresh()
		},
		onReachBottom(){
			console.log('到低部了');
			if(this.loading==2){
				return;
			}
			this.loading =1
			this.pageNum++;
			this.getNewsData()
		},
		methods:{
			getNavData(){
				uni.request({
				    url: 'https://ku.qingnian8.com/dataApi/news/navlist.php',
				    success: (res) => {
						this.navArr = res.data
						// console.log(res.data.length);
						if(res.data.length>0){
							// console.log(res.data[0].id);
							this.navId = res.data[0].id
						}
				    }
				});
			},
			getNewsData(){
				// console.log(this.navId);
				// console.log(this.pageNum);
				uni.request({
				    url: 'https://ku.qingnian8.com/dataApi/news/newslist.php',
					data:{
						cid: this.navId,
						num: 6,
						page: this.pageNum
					},
				    success: (res) => {
				        // console.log(res.data);
						// console.log(this.newsList);
						if(res.data.length==0){
							this.loading = 2
						}
						// this.newsList = res.data
						this.newsList=[...this.newsList,...res.data]
				    }
				});
			},
			clickNav(index,id){
				this.pageNum  = 1
				this.newsList = []
				this.navIndex = index
				this.navId = id
				this.loading = 0
				this.getNewsData()
			},
			goDetail(item){
				console.log(item);
				uni.navigateTo({
					url:`newsDetail?cid=${item.classid}&id=${item.id}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	view {
		box-sizing: border-box;
	}
	
	.navscroll {
		height: 80rpx;
		line-height: 80rpx;
		background-color: #f7f8fa;
		white-space: nowrap;
		overflow-x: hidden;
		
		//标题固定位置
		position: fixed;
		top: var(--window-top);
		left: 0;
		z-index: 10;
		
		.item{
			font-size: 32rpx;
			line-height: 80rpx;
			display: inline-block;
			padding: 0 30rpx;
			&.active{
				color:#31C27C;
			}
		}
		
		::-webkit-scrollbar{
			width: 4px !important;
			height:1px !important;
			-webkit-appearance: auto !important;
			background: transparent !important;
			display: block;
		}
	}
	
	.content{
		padding: 30rpx;
		padding-top:130rpx;
		.row{
			border-bottom: 1px dotted #efefef;
			padding: 15rpx 0;
		}
	}
	
	.loading{
		text-align: center;
		font-size: 26rpx;
		color: #888;
		line-height: 2em;
	}
	
	
</style>
